<template>
        <van-nav-bar
              title="记录美好"
              left-text="返回"
              right-text="完成"
              @click-right="onSubmit"
              @click-left="onClickLeft"
              :placeholder="true"
              :fixed="true"
        />
        <!-- <div style="height:10px;background-color: rgb(240,240,240);"></div> -->

        <div class="w-area" >  
            <van-cell-group inset>
                <van-field
                  v-model="message"
                  rows="6"
                  autosize
                  type="textarea"
                  placeholder="记录你们的幸福瞬间！"
                  maxlength="800"
                  show-word-limit
                />
            </van-cell-group>

            <van-uploader v-model="imgList" :after-read="afterRead" multiple :max-count="6" />
        </div>
        

        <!-- <div style="height:10px;background-color: rgb(240,240,240);margin-bottom: 20px;"></div> -->


        <div class="w-bottom">
            <!-- <van-button color="#dce8e8" size="normal" @click="onSave" style="margin-right: 4vw;">存为草稿</van-button> -->
            <!-- <van-button color="#ef5050" size="small" @click="onDelete">清空内容</van-button> -->
            <van-button color="#f9cdd4" size="normal" @click="onSubmit">确认发布</van-button>
        </div>
</template>
  
<script>
  // @ is an alias to /src
  import axios from "axios"
  import { showToast, showSuccessToast } from 'vant';
  import {store} from "../utils/store.js"
  
  export default {
    name: 'WriteView',
    data(){
        return{
            message:"",
            imgList:[]
        }
    },
    methods:{
        onClickLeft(){
            history.back()
        },
        afterRead(file){
            console.log(file)
        },
        onSubmit(){
            if(this.message==""&&this.imgList.length==0){
                showToast("请输入内容噢！")
                return
            }
            //axios请求进行提交，
            axios.get('/api/Diary/addDiary', {
              params:{
                loverId:store.loverInfo.loverId,
                diaryContent:this.message,
                userId: store.user.userId,
                startTime: Date.now().toString()
              }
            }).then((res)=>{
                console.log(res.data)
                this.message=""
                if(this.imgList.length>0&&res.data.data!=0){
                    this.updateImage(res.data.data)
                }else{
                    showSuccessToast("发布成功！")
                }
            }).catch(function (error) {
                console.log(error);
            }) 
        },
        updateImage(diaryId){
            let mfile = new FormData();
            this.imgList.forEach(element => {
                mfile.append("file", element.file)   //创建键file，值element.file append会使value变为一个数组
            });
            mfile.append("diaryId",diaryId)
            console.log(mfile)
            axios({
                method: 'post',
                url: '/api/File/uploadImage',
                data: mfile,
                headers: {"Content-Type": "multipart/form-data"},
            }).then((res)=>{
                console.log(res.data)
                showSuccessToast("发布成功！")
            }).catch(function (error) {
                console.log(error);
            }) 
        },
        html5Reader(file, item) {
            const reader = new FileReader();
            reader.onload = e => {
            item.src=e.target.result
            };
            reader.readAsDataURL(file);
        }
    },
    components: {

    }
  }
</script>


<style>
.test{
    color: #ef5050;
}

.w-bottom{
    margin:0 2vw ;
    padding: 4vw;
    background-color: #ffffff;
    margin-bottom: 2vw;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    /* margin-bottom: ; */
}

.w-area{
    background-color:#ffffff;
    margin: 2vw 2vw;
}

.w-area .van-cell-group--inset{
    margin:0 0 !important;
}

.w-area .van-cell{
    font-size: 18px !important;
}

.w-area .van-uploader__wrapper{
    justify-content: space-evenly;
}

.w-area .van-uploader__upload{
    width: 28vw !important;
    height: 28vw !important;
}

.w-area .van-uploader__preview-image{
    width: 28vw !important;
    height: 28vw !important;
}
</style>


